<template>
  <view class="recommend-container">
    <view class="uni-margin-wrap">
      <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
        <swiper-item>
          <view class="swiper-item uni-bg-red">A</view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item uni-bg-green">B</view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item uni-bg-blue">C</view>
        </swiper-item>
      </swiper>
      <view class="tag-header">
        <view class="tag-bar">
          <scroll-view class=" scroll-view_H tag-bar-container" scroll-x="true" @scroll="scroll" scroll-left="120">
            <view :class="['scroll-view-item_H', 'tag-bar-item', activeTag.id == item.id ? 'active': '']" v-for="item in tags" :key="item.id" @click="clickTag(item)">{{item.name}}</view>
          </scroll-view>
        </view>
        <view class="search-item" @click="toSearch">
          <uni-icons class="search-icon" type="search" size="24"></uni-icons>
        </view>
      </view>
    </view>
    <view class="section">
      <view class="section-header">
        <text class="section-title uni-ellipsis">最新推荐,值得观看</text>
        <view class="more" @click="toMore">更多</view>
      </view>
      <view class="section-item" v-for="item in recommendBooks" :key="item.id" @click="toBookInfo(item)">
        <view class="img-container">
          <image class="img" :src="item.cover" mode="widthFix" ></image>
        </view>
        <view class="book-name uni-ellipsis">{{item.name}}</view>
        <view class="book-tags">
          <text class="book-tag-item" v-for="(v, i) in item.tags" :key="i">{{v}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "recommend",
  data(){
    return {
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,

      tags: [],
      activeTag: {},
      recommendBooks: [],
    }
  },
  onShow(){
    this.getTag()
    this.getData()
  },
  methods: {
    getTag() {
      this.tags = [
        {id: 16, name: '推荐', num: 12345},
        {id: 11, name: '爱情', num: 12345},
        {id: 17, name: '玄幻', num: 12345},
        {id: 12, name: '都市', num: 12345},
        {id: 13, name: '搞笑', num: 12345},
        {id: 14, name: '国漫', num: 12345},
        {id: 15, name: '日漫', num: 12345},
      ]
      this.activeTag = this.tags[0]
    },
    getData() {
      this.recommendBooks = [
        {name: '想都别想', cover: '../../../static/test/manhua.png', time: '2020-10-03', tags: ['生活','感悟', '日常']},
        {name: '做梦吧你', cover: '../../../static/test/manhua.png', time: '2020-10-03', tags: ['生活','感悟', '日常']},
        {name: '就算是阿Q精神，也要有追求美好生活的勇气。', cover: '../../../static/test/manhua.png', time: '2020-10-04', tags: ['生活','感悟', '日常']},
        {name: '就算是阿Q精神，也要有追求美好生活的勇气。', cover: '../../../static/test/manhua.png', time: '2020-10-04', tags: ['生活','感悟', '日常']},
      ]
    },
    clickTag(item){
      this.activeTag = item
    },
    toSearch(){
      uni.navigateTo({
        url: '/pages/tabBar/recommend/search',
        complete: (e)=>{
          console.log(e)
        }
      })
    },
    scroll: (e)=>{
      console.log(e)
      // this.old.scrollTop = e.detail.scrollTop
    },
    toMore(item) {
      uni.navigateTo({
        url: '/pages/tabBar/recommend/more'
      })
    },
    toBookInfo(item) {
      uni.navigateTo({
        url: '/pages/tabBar/book/bookInfo'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.recommend-container {
  .uni-margin-wrap {
    width:750rpx;
    /* #ifdef H5 */
    width: 100%;
    /* #endif */
    position: relative;
    .swiper {
      height: 450rpx;
      .swiper-item {
        display: block;
        height: 450rpx;
        line-height: 450rpx;
        text-align: center;
      }
    }
    .tag-header {
      position: absolute;
      top: 45rpx;
      left: 15rpx;
      width: 100%;
      height: 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .tag-bar {
        width: 76%;
        height: 50rpx;
        .tag-bar-container {
          width: 100%;
          height: 50rpx;
          flex-direction: row;
          white-space: nowrap;
          .tag-bar-item {
            display: inline-block;
            flex-wrap: nowrap;
            height: 100%;
            padding-left: 34rpx;
            padding-right: 34rpx;
            line-height: 50rpx;
            color: #FFF;
            &.active{
              font-size: 34rpx;
              font-weight: bolder;
            }
          }
        }
      }
      .search-item {
        width: 20%;
        height: 50rpx;
        float: right;
        line-height: 50rpx;
        text-align: center;
      }
    }
  }
  .section {
    /* #ifdef H5 */
    width: 100%;
    /* #endif */
    width: 750rpx;
    // height: 500rpx;
    &::after {
      content: "";
      display: block;
      clear: both;
    }
    .section-header {
      /* #ifdef H5 */
      width: 100%;
      /* #endif */
      height: 50rpx;
      padding: 8rpx 0 5rpx 0;
      position: relative;
      .section-title {
        margin-left: 10rpx;
        width: 70%;
        height: 50rpx;
        font-size: 30rpx;
        font-weight: bolder;
      }
      .more {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        width: 100rpx;
        height: 40rpx;
        text-align: center;
        line-height: 40rpx;
        border: 1px solid #ccc;
        border-radius: 40rpx;
      }
    }
    .section-item {
      /* #ifdef H5 */
      width: 30%;
      /* #endif */
      width: 230rpx;
      margin: 10rpx 10rpx;
      height: 400rpx;
      float: left;
      box-shadow: 0 0 5rpx #ccc;
      display: flex;
      flex-direction: column;
      align-items: center;
      // overflow: hidden;
      .img-container {
        /* #ifdef H5 */
        width:100%;
        /* #endif */
        width: 230rpx;
        height: 320rpx;
        .img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .book-name {
         /* #ifdef H5 */
        width:100%;
        /* #endif */
        width: 230rpx;
        height: 40rpx;
        text-align: center;
        font-weight: bolder;
      }
      .book-tags {
        height: 40rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;
        .book-tag-item {
          height: 40rpx;
          font-size: 20rpx;
          color: #ccc;
          padding: 5rpx 10rpx;
        }
      }
    }
  }
}
</style>
